<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body {
				background:#333;
				width:100%;
				color:#8A3F86;
			}
			h1 {
				width:165px;
				height:75px;
				margin:1px auto;
				color:#a77c95;
			}
			.musico {
				display:block;
				margin:0 auto;
				-webkit-border-radius:10px;
				-moz-border-radius:10px;
				border-radius:10px;
				background:#ccc;
				box-shadow:0px 0px 10px #5D2764;
				padding:20px;
				height:60px;
				width:60px;
				transform:rotate(180deg);
				-webkit-transform:rotate(180deg);
				-moz-transform:rotate(180deg);
			}
			ul {
				list-style:none;
				padding:0;
				margin:0;
			}
			ul li {
				display:block;
				background:#333;
				float:left;
				height:40px;
				width:5px;
				margin:0 3px;
				box-shadow:0 0 1px #333;
			}
			@keyframes musico1 {
				0% {
				height:30px
			}
			20% {
				height:10px
			}
			40% {
				height:40px
			}
			60% {
				height:30px
			}
			80% {
				height:20px
			}
			100% {
				height:30px
			}
			}@keyframes musico2 {
				0% {
				height:20px
			}
			20% {
				height:10px
			}
			40% {
				height:40px
			}
			60% {
				height:20px
			}
			80% {
				height:40px
			}
			100% {
				height:20px
			}
			}@keyframes musico3 {
				0% {
				height:50px
			}
			20% {
				height:20px
			}
			40% {
				height:30px
			}
			60% {
				height:40px
			}
			80% {
				height:10px
			}
			100% {
				height:50px
			}
			}@keyframes musico4 {
				0% {
				height:10px
			}
			20% {
				height:20px
			}
			40% {
				height:30px
			}
			60% {
				height:10px
			}
			80% {
				height:40px
			}
			100% {
				height:10px
			}
			}@keyframes musico5 {
				0% {
				height:10px
			}
			20% {
				height:30px
			}
			40% {
				height:20px
			}
			60% {
				height:30px
			}
			80% {
				height:20px
			}
			100% {
				height:10px
			}
			}@-webkit-keyframes musico1 {
				0% {
				height:30px
			}
			20% {
				height:10px
			}
			40% {
				height:40px
			}
			60% {
				height:30px
			}
			80% {
				height:20px
			}
			100% {
				height:30px
			}
			}@-webkit-keyframes musico2 {
				0% {
				height:20px
			}
			20% {
				height:10px
			}
			40% {
				height:40px
			}
			60% {
				height:20px
			}
			80% {
				height:40px
			}
			100% {
				height:20px
			}
			}@-webkit-keyframes musico3 {
				0% {
				height:50px
			}
			20% {
				height:20px
			}
			40% {
				height:30px
			}
			60% {
				height:40px
			}
			80% {
				height:10px
			}
			100% {
				height:50px
			}
			}@-webkit-keyframes musico4 {
				0% {
				height:10px
			}
			20% {
				height:20px
			}
			40% {
				height:30px
			}
			60% {
				height:10px
			}
			80% {
				height:40px
			}
			100% {
				height:10px
			}
			}@-webkit-keyframes musico5 {
				0% {
				height:10px
			}
			20% {
				height:30px
			}
			40% {
				height:20px
			}
			60% {
				height:30px
			}
			80% {
				height:20px
			}
			100% {
				height:10px
			}
			}.musico ul li:nth-child(1) {
				animation:musico1 1s infinite;
				-webkit-animation:musico1 1s infinite;
				background-color:#797fb4;
			}
			.musico ul li:nth-child(2) {
				animation:musico2 1s infinite;
				-webkit-animation:musico2 1s infinite;
				background-color:bcce;
			}
			.musico ul li:nth-child(3) {
				animation:musico3 1s infinite;
				-webkit-animation:musico3 1s infinite;
				background-color:#1ab667;
			}
			.musico ul li:nth-child(4) {
				animation:musico4 1s infinite;
				-webkit-animation:musico4 1s infinite;
				background-color:#fcd417;
			}
			.musico ul li:nth-child(5) {
				animation:musico5 1s infinite;
				-webkit-animation:musico5 1s infinite;
				background-color:#f21b1b;
			}


		</style>
	</head>
	<body>
		<h1>Music bar</h1>
		<div class="musico">
		    <ul>
		        <li class="bar1"></li>
		        <li class="bar2"></li>
		        <li class="bar3"></li>
		        <li class="bar4"></li>
		        <li class="bar5"></li>
		    </ul>
		</div>
		<div>
		</div>
	</body>
</html>
